Understanding the matrix() Function in CSS 2D Transforms
The matrix() function in CSS is a powerful way to apply multiple 2D transformations — such as scaling, skewing, rotating, and translating — in a single function. It represents a transformation matrix composed of six values that define how the element is transformed in 2D space.
a— controls scaling on the X-axis.b— controls skewing on the Y-axis.c— controls skewing on the X-axis.d— controls scaling on the Y-axis.tx— translates (moves) the element along the X-axis.ty— translates (moves) the element along the Y-axis.
In this example, the matrix() function applies a skew on both axes and a translation of 50px in both directions. On hover, it smoothly transitions back to its original position.
Allows combining multiple transforms into one concise command.
Offers fine-grained control over transformation behavior.
Useful for complex animations and programmatic manipulation using JavaScript (e.g., via
getComputedStyle).
While matrix() can seem complex, it’s extremely useful for advanced transformations where precision and performance matter.
Use simple transform functions like
rotate(),scale(), ortranslate()for readability.Reserve
matrix()for complex or dynamically generated transformations.